<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">体格检查标准操作规程</text>
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 文档头部信息 -->
      <view class="document-header">
        <view class="header-card">
          <view class="header-icon">
            <text
              class="fa fa-file-text fa-med"
              style="font-size: margin-right:12rpx"
            ></text>
          </view>
          <view class="header-info">
            <text class="header-title">体格检查标准操作规程</text>
            <view class="header-meta">
              <text class="meta-item">
                <text
                  class="fa fa-file-text-o"
                  style="margin-right: 8rpx"
                ></text>
                PDF文档
              </text>
              <text class="meta-item">
                <text class="fa fa-download" style="margin-right: 8rpx"></text
                >2.3MB</text
              >
              <text class="meta-item">
                <text class="fa fa-clock-o" style="margin-right: 8rpx"></text>
                预计阅读 15分钟</text
              >
            </view>
            <view class="progress-wrapper">
              <view class="progress-bar">
                <view class="progress-fill" style="width: 75%"></view>
              </view>
              <text class="progress-text">75%</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 文档内容 -->
      <view class="document-content">
        <view class="content-card">
          <!-- 标题 -->
          <text class="doc-main-title">体格检查标准操作规程</text>

          <!-- 第1章 -->
          <text class="doc-chapter-title">1. 检查前准备</text>
          <view class="doc-paragraph">
            <text class="doc-text"
              >1.1
              环境准备：确保检查环境安静、温暖、光线充足，保护患者隐私。</text
            >
            <text class="doc-text"
              >1.2
              器械准备：听诊器、血压计、体温计、手电筒等检查器械应清洁消毒。</text
            >
            <text class="doc-text"
              >1.3 医生准备：洗手消毒，穿戴整洁，态度和蔼。</text
            >
          </view>

          <!-- 第2章 -->
          <text class="doc-chapter-title">2. 一般检查</text>
          <view class="doc-paragraph">
            <text class="doc-text"
              >2.1 生命体征测量：体温、脉搏、呼吸、血压的标准测量方法。</text
            >
            <text class="doc-text"
              >2.2 一般状态观察：意识状态、精神状态、营养状况、体位等。</text
            >
            <text class="doc-text"
              >2.3 皮肤粘膜检查：颜色、湿度、弹性、皮疹等。</text
            >
          </view>

          <!-- 第3章 -->
          <text class="doc-chapter-title">3. 系统检查</text>
          <view class="doc-paragraph">
            <text class="doc-text"
              >3.1 头颈部检查：头部外形、眼耳鼻喉、颈部淋巴结、甲状腺等。</text
            >
            <text class="doc-text"
              >3.2 胸部检查：胸廓外形、肺部听诊、心脏检查等。</text
            >
            <text class="doc-text"
              >3.3 腹部检查：望触叩听四步法的标准操作。</text
            >
          </view>

          <!-- 重要提示框 -->
          <view class="tip-box">
            <view class="tip-header">
              <text class="tip-icon">💡</text>
              <text class="tip-title">重要提示</text>
            </view>
            <text class="tip-content"
              >体格检查应遵循系统性、全面性、准确性的原则，注意手法轻柔，避免给患者造成不适。</text
            >
          </view>

          <!-- 第4章 -->
          <text class="doc-chapter-title">4. 检查后处理</text>
          <view class="doc-paragraph">
            <text class="doc-text"
              >4.1 记录检查结果：准确、完整、及时记录检查发现。</text
            >
            <text class="doc-text">4.2 器械清洁：检查器械的清洁消毒处理。</text>
            <text class="doc-text"
              >4.3 患者指导：向患者说明检查结果，给予必要的健康指导。</text
            >
          </view>
        </view>
      </view>

      <view class="bottom-spacer"></view>
    </scroll-view>

    <!-- 浮动计时器 -->
    <view class="floating-timer">
      <text class="timer-icon">⏱</text>
      <text class="timer-text">{{ timer }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      timer: "05:42",
      timerInterval: null,
      seconds: 342, // 5分42秒
    };
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
    this.startTimer();
  },
  onUnload() {
    if (this.timerInterval) {
      clearInterval(this.timerInterval);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    startTimer() {
      this.timerInterval = setInterval(() => {
        this.seconds++;
        const minutes = Math.floor(this.seconds / 60);
        const secs = this.seconds % 60;
        this.timer = `${String(minutes).padStart(2, "0")}:${String(
          secs
        ).padStart(2, "0")}`;
      }, 1000);
    },
    goToHome() {
      uni.navigateTo({
        url: "/pages/home",
      });
    },
    goToProfile() {
      uni.navigateTo({
        url: "/pages/profile",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 32rpx;
}

.nav-left {
  position: absolute;
  left: 32rpx;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
  text-align: center;
}

/* 内容区域 */
.content {
  flex: 1;
  padding-bottom: 120rpx;
}

/* 文档头部 */
.document-header {
  padding: 32rpx;
}

.header-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
  display: flex;
  gap: 24rpx;
}

.header-icon {
  width: 96rpx;
  height: 96rpx;
  background: #dcfce7;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  flex-shrink: 0;
}

.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #6b7280;
}

.progress-wrapper {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background: #e5e7eb;
  border-radius: 999rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #22c55e, #10b981);
  border-radius: 999rpx;
}

.progress-text {
  font-size: 24rpx;
  font-weight: 500;
  color: #4b5563;
}

/* 文档内容 */
.document-content {
  padding: 0 32rpx;
}

.content-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 48rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.doc-main-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #111827;
  display: block;
  margin-bottom: 32rpx;
  line-height: 1.4;
}

.doc-chapter-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  display: block;
  margin-top: 48rpx;
  margin-bottom: 24rpx;
  line-height: 1.4;
}

.doc-paragraph {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.doc-text {
  font-size: 28rpx;
  color: #374151;
  line-height: 1.6;
  display: block;
}

/* 提示框 */
.tip-box {
  background: #eff6ff;
  border-left: 8rpx solid #3b82f6;
  border-radius: 0 16rpx 16rpx 0;
  padding: 32rpx;
  margin: 48rpx 0;
}

.tip-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.tip-icon {
  font-size: 32rpx;
}

.tip-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1e40af;
}

.tip-content {
  font-size: 28rpx;
  color: #1e40af;
  line-height: 1.6;
  display: block;
}

/* 浮动计时器 */
.floating-timer {
  position: fixed;
  top: 160rpx;
  right: 32rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border: 1rpx solid #e5e7eb;
  border-radius: 24rpx;
  padding: 16rpx 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12rpx;
  z-index: 100;
}

.timer-icon {
  font-size: 28rpx;
  color: #16a34a;
}

.timer-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

/* 底部留白 */
.bottom-spacer {
  height: 48rpx;
}

/* 底部导航 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  color: #6b7280;
}

.tab-item-active {
  color: #2563eb;
}

.tab-icon {
  font-size: 36rpx;
}

.tab-label {
  font-size: 20rpx;
}

.tab-item-active .tab-label {
  font-weight: 500;
}
.fa-file-text {
  color: rgb(22 163 74);
}
</style>
